<template>
    <div>
        <el-col :span="12">
            <el-card shadow="never" style="background-color: rgb(58 194 91)">
                <div class="number-icon-main"><i class="fa fa-television number-icon"></i></div>
                <div class="number-grow-warp"><span class="number-grow">{{onlineValue}}人</span></div>
                <div class="number-title">管理平台当前在线人数</div>
            </el-card>
        </el-col>
    </div>
</template>

<script>
import Vue from "vue";
export default {
    name: "OnlineCount",
    data() {
        return {
            onlineValue: 0,
        }
    },
    watch: {
        'onlineValue': {
            handler(newValue,oldValue) {
                console.log("值变化->>>"+newValue+"---"+oldValue)
            }
        }
    },
    created() {
        //绑定事件
        window.addEventListener('beforeunload', e => this.handleWsClose(e))

    },
    beforeDestroy() {
        //卸载事件
        window.removeEventListener('beforeunload', e => this.handleWsClose(e))
    },
    mounted() {
        // websocket实例
        const userId = Vue.ls.get('userId')
        if(userId != null) {
            const ws = new WebSocket('ws://localhost:9090/api/ws/'+userId)
            // 绑定websocket事件处理函数
            ws.addEventListener('open', this.handleWsOpen.bind(this), false)
            ws.addEventListener('message', this.handleWsMessage.bind(this), false)
            ws.addEventListener('error', this.handleWsError.bind(this), false)
            ws.addEventListener('close', this.handleWsClose.bind(this), false)
        }
    },
    methods: {
        //	WebSocket 连接建立时触发
        handleWsOpen(e) {
            console.log('FE：WebSocket open', e)
        },
        //	WebSocket 客户端接收服务端数据时触发
        handleWsMessage(e) {
            console.log('FE：WebSocket message', e)
            this.onlineValue = parseInt(JSON.parse(e.data).count)
        },
        //	WebSocket 通信发生错误时触发
        handleWsError(e) {
            console.log('FE：WebSocket error', e)
        },
        //	WebSocket 连接关闭时触发
        handleWsClose(e) {
            console.log('FE：WebSocket close', e)
            this.ws.close();
        },
    }
}
</script>

<style scoped>
    .number-icon-main{
        margin-bottom: 25px;
    }
    .number-icon{
        color: #ffffff;
        display: inline-block;
        speak: none;
        font-style: normal;
        font-size: 24px;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        text-rendering: optimizeLegibility;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        vertical-align: -.125em;
        text-align: center;
    }
    .number-title{
        color: rgb(255, 255, 255);
        font-size: 12px;
        font-weight: 500;
    }
    .number-grow-warp{
        transform: translateZ(0);
    }
    .number-grow {
        color: rgb(255, 255, 255);
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 2.67px;
        display: block;
        margin-bottom: 10px;
    }
</style>
